<template>
   <div>
     <!-- 1. 添加主菜单addmain 2. 编辑主菜单 editmain  3. 添加子菜单 addsub   4,.编辑子菜单 editsub -->
    <el-button type="primary" @click="modalFun('addmain',{})">添加主菜单</el-button>
    <el-table
    :data="menuList"
    style="width: 100%;margin-bottom: 20px;"
    row-key="_id"
    
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="title"
      label="菜单"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="路由的名字"
      >
    </el-table-column>
    <el-table-column
      prop="path"
      label="路由地址"
      >
    </el-table-column>
    <el-table-column
      prop="component"
      label="组件名"
      width="300">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
     >
      <template slot-scope="scope">

        <el-button v-if="scope.row.children" @click="modalFun('addsub',scope.row)" type="text" size="small">添加子菜单</el-button>

        <el-button v-if="scope.row.children" @click="modalFun('editmain',scope.row)" type="text" size="small">编辑主菜单</el-button>
        <el-button v-else @click="modalFun('editsub',scope.row)" type="text" size="small">编辑子菜单</el-button>


        <el-button v-if="scope.row.children" @click="deleteMenu(scope.row,'main')" type="text" size="small">删除主菜单</el-button>
        <el-button v-else @click="deleteMenu(scope.row,'sub')" type="text" size="small">删除子菜单</el-button>
       
      </template>
    </el-table-column>
    
  </el-table>

  <el-dialog :title="modalObj.title" :visible.sync="modalObj.isOpen"  width="40%">
        <MenuManage :action="action" @result="getResData" :currentData="currentData" ></MenuManage>
  </el-dialog>

   </div>
</template>

<script>
import axiosEl from '@/utils/axios';
import MenuManage from '@/components/MenuManage.vue';
export default {
  data() {
    return {
      currentData:{},  // 当前修改的数据
      menuList:[],
      modalObj:{
        title:'添加主菜单',
        isOpen:false
      },
      // 当前操作的行为参数
      action:{
        kind:'addmain',
        method:'post',
        url:'/menu/add/main'
      }
    }
  },
  components:{
    MenuManage
  },
  methods:{
    // 用来获取子组件给的数据
    getResData(data){
      if(data) {
          this.modalObj.isOpen = false;
          this.getMenuList();
      }
    },
    // 获取所有的菜单列表
    getMenuList(){
      axiosEl({
            method:'get',
            url:'/menu/list',
        }).then((res)=>{
            console.log(res.data);
            this.menuList = res.data;
        })

    },

    
    deleteMenu(data,cate){
      console.log(data);
      this.$confirm('你确认要删除吗',{
        confirmButtonText:'确认',
        cancelButtonText:'取消'
      }).then(async ()=>{
        // 确认删除
        let paramObj = {};
        let durl = cate=='main' ? '/menu/delete' : '/menu/delete/sub';
        if(cate=='main' ){
          // 主菜单
          paramObj.parentId = data._id
        } else {
        // 子菜单
          paramObj.id = data._id;
          paramObj.parentId = this.getParentId(data._id);
        }
        let resData = await axiosEl.delete(durl,{
          params:paramObj
         })
         if(resData.code==1){
            this.$message({
              type:'success',
              message:resData.msg
            })
            // 刷新数据
            this.getMenuList()
         }
      }).catch(()=>{     
      })
      
    },
    // 弹出模态框 
    // <!-- 1. 添加主菜单addmain 2. 编辑主菜单 editmain  3. 添加子菜单 addsub   4,.编辑子菜单 editsub -->
    modalFun(kind,data){
      this.modalObj.isOpen = true;
      var obj  = {
        addmain:{
          title:'添加主菜单',
          action:{
            kind:'addmain',
            method:'post',
            url:'/menu/add/main'
          }
        },
        editmain:{
          title:'编辑主菜单',
          action:{
              kind:'editmain',
              method:'post',
              url:'/menu/update/main'
            }
        },
        addsub:{
          title:'添加子菜单',
          action:{
            kind:'addsub',
            method:'post',
            url:'/menu/add/sub'
          }
        },
        editsub:{
          title:'编辑子菜单',
          action:{
            kind:'editsub',
            method:'post',
            url:'/menu/update/sub'
          }
        }
      }
      this.modalObj.title = obj[kind].title;
      // 添加主菜单
      this.action = obj[kind].action;

      //  添加子菜单 parentId
      if(kind=='addsub'){
        this.currentData = {
          parentId:data._id
        }

      } else if(kind=='editmain' || kind=='editsub'){
        // 只有编辑的时候， 需要渲染数据
          this.currentData = {...data};
    
          // 通过子菜单_id 如何找父菜单的id
          if(kind=='editsub'){
            let ppid =  this.getParentId(data._id);
            this.currentData.parentId = ppid;
            
          }
         
      }
      else if(kind=='addmain'){
        this.currentData = {}
      }

    },
    getParentId(subId){
      let pid = '';
      this.menuList.forEach((item)=>{
          if(item.children) {
           let isHave =  item.children.some((option)=>{
              // option  是一个对象
             return option._id == subId
            })

            if(isHave) {
              pid = item._id;
            }
          }
      })

      return pid;
    }
  },
  created(){
    this.getMenuList()
  }

}


</script>

<style lang="scss">

</style>